<template>
	<SkeletonScreen v-if="loading"></SkeletonScreen>
	<view class="container">
		<!-- 页面头部返回和搜索图标，标题 -->
		<my-Back-search style="position: relative; z-index: 1000;" :yesSearch="false">
			<template #back>
				<uni-icons @click="onBack" type="back" size="28" color="#ff0000"></uni-icons>

			</template>
			<template #time>
				<view>{{Title}}</view>
			</template>
			<template #search>
				<uni-icons @click="toggleDropdown" type="bars" size="28" color="#ff0000"></uni-icons>
				<DropdownMenu :showDropdown="showDropdown"></DropdownMenu>
			</template>
		</my-Back-search>

		<view class="image-eight-Three" v-if="videos.length > 0">
			<my-img-y-Three class="item" v-for="video  in videos" :key="video?.id" :images="video?.imageUrl"
				:tags="video?.tags" :name="video?.name" :bifen="video?.bifen" :biao="video?.biao"
				:episode="video?.episode" :episodes="video?.episodes" :urlId="video?.id"></my-img-y-Three>
		</view>

		<view class="image-eight-Three" v-if="videosList.length > 0">
			<my-img-y-Three class="item" v-for="(item , index) in videosList" :index="index"
				:key="item.collection[0].id" :images="item.collection[0].imageUrl" :tags="item.collection[0].tags"
				:name="item.collection[0].name" :bifen="item.collection[0].bifen" :biao="item.collection[0].biao"
				:episode="item.collection[0].episode" :episodes="item.collection[0].episodes"
				:urlId="item.collection[0].id"></my-img-y-Three>
		</view>

	</view>
	<view style="display: flex; justify-content: center; align-items: center; padding: 30rpx 0; color: #464646;">
		<view>到此为止...</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';
	import {
		swiperImg
	} from '@/API/indexApis.js';
	import {
		RecommendWath
	} from '@/API/geidApis.js';
	import {
		onReachBottom
	} from '@dcloudio/uni-app';
	const loading = ref(true)
	const Title = ref() //头部title
	const videos = ref([]) //video数据
	const videosList = ref([]) //video数据
	const nextPage = ref(1);

	// 获取演员信息
	onLoad((options) => {
		console.log("获取的信息：", options);
		Title.value = options.name
		if (options?.time) {
			Swiperlist(options.type)
		}
		if (options?.recommend) {
			RecommendWathFunction(1)
		}
	})

	// 获取参数
	const Swiperlist = async (type) => {
		let video = await swiperImg(36, type);
		videos.value = video.data.list;
		console.log("videos:", videos.value)
		loading.value = false
	}

	// 用户推荐内容
	const RecommendWathFunction = async (page) => {
		let video = await RecommendWath(page, 0);
		videosList.value = video.list;
		nextPage.value = video.nextPage;
		console.log("videos:", video)
		loading.value = false
	}

	// 触底刷新
	onReachBottom(() => {
		console.log("触底了");
		if (nextPage.value > 1) {
			RecommendWathFunction(nextPage.value)
			console.log("触底了");
		}
	})


	// 返回按钮
	function onBack() {
		// 获取当前页面栈
		const pages = getCurrentPages()
		console.log('当前页面栈:', pages.length)
		if (pages.length > 1) {
			uni.navigateBack({
				delta: 1 // 返回上一个页面
			});
		} else {
			// 已经是第一页，不能返回
			// 可以选择关闭小程序或跳转到首页
			uni.switchTab({
				url: '/pages/index/index'
			})
		}

	}
</script>

<style scoped>
	.image-eight-Three {
		padding: 30rpx;
		display: grid;
		gap: 15rpx;
		grid-template-columns: repeat(3, 1fr);
	}

	.item {
		overflow: hidden;
		/* 防止内容溢出 */
		position: relative;
		width: 100%;
		/* 图片宽度填充整个容器 */
		height: auto;
		/* 根据宽度自动调整高度 */
		display: block;
		/* 移除图片下方默认的空白间隙 */
		object-fit: cover;
		/* 保证图片完全覆盖容器，可能会裁剪图片 */
	}
</style>